<template>
<div class="wrap">
    <ul>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="item in cities" :label="item" :key="item.id">{{item.title}}</el-checkbox>
            </el-checkbox-group>
    </ul>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <button @click="del">删除</button>
</div>
    
</template>

<script>

export default {
    data(){
        return {
            checkAll: false,
            checkedCities: [],
            cities: [],
            isIndeterminate: true
        }
    },
    created(){
        this.$http.get("/list").then(res => {
            this.cities= res.data.data.filter((item) => {
                return item.status == 'false'
            })
        })
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      del(){
          
          if(this.checkAll){
              this.$http.get("/del",{params:{data:JSON.stringify(this.cities)}}).then(res => {
                this.cities= res.data.data
            })
          }else{
            this.$http.get("/del",{params:{data:JSON.stringify(this.checkedCities)}}).then(res => {
                this.cities= res.data.data
            })
            
            
          }
      }
    }
}
</script>

<style>

</style>
